<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.模板：   动态的html页面
		      包含了一些js语法代码
			      大括号表达式
				  指令
			  2.双大括号表达式{{exp}} 或 {{{exp}}}
			    功能： 向页面输出数据
				可以调用对象的方法
				
			  3、指令的使用
			     以v-开头的
				 指令一：强制数据绑定，指令变化的属性值。  （v-bind）
				 指令二: 绑定监听事件 （v-on）
				 
			  -->
		<div id="app">
			<h1>1.双大括号表达式</h1>
			<p>{{message}}</p>
			<p>{{message.toUpperCase()}}</p>
			
			<h1>2.强制数据绑定</h1>
			<a href="url">访问站点</a>
			<a v-bind:href="url"> Vue强制访问站点二</a>
			<a :href="url">Vue强制数据绑定</a>
			
			<h1>3.绑定监听事件</h1>
			<button v-on:click="func">点击</button>
			<button @click="func">点击</button>
			
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el:"#app",
				data: {
					message : "sanchuang",
					url : "http://www.baidu.com"
				},
				methods: {
					func () {
						alert("你好")
					} 
				}
			})
		</script>
	</body>
</html>
